<template>
  <div class="register">
    <div class="registerHeader">
      <div class="registerHeader-image">
        <img src="../assets/images/logo-smaller.png" alt="" />
      </div>
      <div class="registerHeader-text">智能仓库系统管理平台</div>
    </div>
    <div class="registerBox clearFloat">
      <div class="registerModal">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName"></el-input>
          </el-form-item>
          <el-form-item label="管理帐号" prop="adminIphone">
            <el-input
              v-model="form.adminIphone"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="adminPassword">
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="form.adminPassword"
              auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPassword">
            <el-input
              type="password"
              placeholder="请再次输入密码"
              v-model="form.checkPassword"
              auto-complete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员名" prop="adminName">
            <el-input v-model="form.adminName"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input type="textarea" v-model="form.companyAddress"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">申请</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";

export default {
  name: "Register",
  data() {
    var checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        return callback(new Error("请输入正确的手机号"));
      } else {
        //判断手机号是否已经注册
        PF.publicLoadingShow("验证中...");
        IOT.getServerData(
          "/users/validUserAccount",
          "get",
          {account: value},
          (ret) => {
            PF.publicLoadingHide();
            if (ret.code === 200) {
              callback();
            } else {
              return callback(new Error("手机号已存在"));
            }
          },
          true
        );

        
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (this.form.adminPassword !== "") {
        //   this.$refs.form.validateField("adminPassword");
        // }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.adminPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        companyName: "",
        adminIphone: "",
        adminPassword: "",
        checkPassword: "",
        adminName: "",
        companyAddress: "",
      },
      rules: {
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        adminPassword: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        checkPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        adminIphone: [
          { required: true, validator: checkAccount, trigger: "blur" },
        ],
        adminName: [
          { required: true, message: "请输入管理员名", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  components: {
    Footer,
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          PF.publicLoadingHide();
          IOT.getServerData(
            "/company/add",
            "post",
            this.form,
            (ret) => {
              PF.publicLoadingHide();
              if (ret.code === 200) {
                PF.publicMessage("注册成功，请等待后台审核!", "success", 1000);
                //跳转页面
                this.$router.push({ name: "login" });
              } else {
                PF.publicMessage(ret.message || "服务器请求错误!", "error");
              }
            },
            true
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped lang="less">
.register {
  background-color: #3d8fec;
  padding-bottom: 500px;
  .registerHeader {
    position: relative;
    height: 200px;
    .registerHeader-image {
      margin-top: 10px;
      float: left;
      padding-top: 10px;
      padding-left: 30px;
      height: 40px;
      padding-right: 20px;
      border-right: 2px solid #fbfbfb;
    }
    .registerHeader-text {
      padding: 20px;
      float: left;
      font-size: 20px;
      color: white;
    }
  }
  .registerBox {
    //background-color: rgb(61,143,236);
    width: 1100px;
    height: 500px;
    margin: 0px auto;
    .imgBox {
      width: 500px;
      height: 400px;
      > img {
        width: 500px;
      }
    }
    .registerModal {
      width: 350px;
      height: 450px;
      margin: 0 auto;
      border: 1px solid #ddd;
      padding: 25px 5px 25px 5px;
      background: #fff;
      margin: 0 auto;
      .registerTitle {
        font-family: Microsoft YaHei;
        font-size: 20px;
        color: #565656;
      }
      ul {
        width: 280px;
        margin: 50px auto;
        li {
          text-align: center;
          margin: 20px 0;
        }
        li:first-child {
          span {
            display: inline-block;
            width: 50%;
            line-height: 30px;
            border-bottom: 1px solid #409eff;
          }
        }
      }
    }
  }
}
</style>
